<template>
    <div class="def-bht-login">
        <client-only>
            <top-bar></top-bar>
        </client-only>



        <div class="def-bht-login-content">

            <div :class="isColLeft ? 'left-nav collapse' : 'left-nav'">

                <div class="icno-btn" @click="icnoHadler">
                    <i :class="isColLeft ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
                </div>
            </div>


            <div :class="isColLeft ? 'view collapse' : 'view' ">

                <div class="nuxt-view">
                    <nuxt/>
                </div>

                <my-footer></my-footer>
            </div>
     


        </div>
        

    </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions} from 'vuex';
import topBar from '@layout/def-bht-login/top-bar'
import myFooter from '@layout/def-bht-login/my-footer'

export default {
    name: 'def-bht',
    components: {
        topBar,
        myFooter,
    },
    data () {
        return {
            isColLeft:false,
        }
    },
    computed: {
    },
    watch: {
    },
    methods: {
        ...mapActions({
            getWebInfo: 'getWebInfo',
        }),

        icnoHadler(){
            this.isColLeft = !this.isColLeft
        },

    },
    created () {
    },
    mounted () {
        this.getWebInfo();
    },
}
</script>
<style lang="scss" scoped>
    @import '@css/var.scss';

    .def-bht-login{
        width: 100%;
    }

    .def-bht-login-content{
        width: 100%;
        padding-top: $topBarHeight;
        position: relative;
    }

    .left-nav{
        position: fixed;
        top: $topBarHeight;
        left: 0;
        right: 0;
        bottom:0;
        width: $leftNavWidth;
        border-right: 1px solid $infoColor3;
        transition: all .3s;
        z-index: 999;

        &.collapse {
            width: $colLeftNavWidth;
        }

        .icno-btn{
            position: absolute;
            top: 200px;
            right:-10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: $whiteColor;
            border:1px solid $infoColor3;
            cursor: pointer;

            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        .icno-btn:hover{
            transform: scale(1.2);
        }

    }

    .view{
        padding-left: $leftNavWidth;
        transition: all .3s;

        &.collapse {
            padding-left: $colLeftNavWidth;
        }

        .nuxt-view{
            padding: 10px 10px 10px 14px;
            min-height: calc(100vh - $topBarHeight);
        }
    }
    

</style>
